<style>
.edit_canvas{
	width:200px;
	height:200px;
	margin:10px 40px 10px;
	display:inline-block;
	vertical-align: middle;
	background-color:rgba(236,240,241,0.8);
	background-image: -webkit-linear-gradient(rgba(200,200,200,0.16) 1px, transparent 1px),-webkit-linear-gradient(0deg, rgba(200,200,200,0.16) 1px, transparent 1px),-webkit-linear-gradient(rgba(200,200,200,0.12) 1px, transparent 1px),-webkit-linear-gradient(0deg, rgba(200,200,200,0.12) 1px, transparent 1px),-webkit-linear-gradient(rgba(200,200,200,0.1) 1px, transparent 1px),-webkit-linear-gradient(0deg, rgba(200,200,200,0.1) 1px, transparent 1px);
    background-image: -moz-linear-gradient(rgba(200,200,200,0.16) 1px, transparent 1px),-moz-linear-gradient(0deg, rgba(200,200,200,0.16) 1px, transparent 1px),-moz-linear-gradient(rgba(200,200,200,0.12) 1px, transparent 1px),-moz-linear-gradient(0deg, rgba(200,200,200,0.12) 1px, transparent 1px),-moz-linear-gradient(rgba(200,200,200,0.1) 1px, transparent 1px),-moz-linear-gradient(0deg, rgba(200,200,200,0.1) 1px, transparent 1px);
    background-image: -ms-linear-gradient(rgba(200,200,200,0.16) 1px, transparent 1px),-ms-linear-gradient(0deg, rgba(200,200,200,0.16) 1px, transparent 1px),-ms-linear-gradient(rgba(200,200,200,0.12) 1px, transparent 1px),-ms-linear-gradient(0deg, rgba(200,200,200,0.12) 1px, transparent 1px),-ms-linear-gradient(rgba(200,200,200,0.1) 1px, transparent 1px),-ms-linear-gradient(0deg, rgba(200,200,200,0.1) 1px, transparent 1px);
    background-size: 4em 4em,4em 4em,1em 1em,1em 1em,.5em .5em,.5em .5em;
}
.icon_edit_area{
	text-align:center;
	background:#ddd;
	border-radius:3px;
}
button.next_btn{
	display:inline-block;
	vertical-align:middle;
	background:#f7f7f7;
	border:none;
	padding:10px;
	border-radius:4px;
}

.next_btn::before {
	position: relative;
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	transform: rotate(45deg);
	bottom:-2px;
}

button.next::before{
	border-right: 0.3em solid #aaa;
	border-top: 0.3em solid #aaa;
	left:-4px;
	
}

button.pre::before{
	border-left: 0.3em solid #aaa;
	border-bottom: 0.3em solid #aaa;
	right:-4px;
}

/* Change color */
.next_btn:hover {
	color: red; /* For the text */
}
.next_btn:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

.edit_icon_form{
	display:inline-block;
	vertical-align:middle;
}
.align_types>div{
	display:inline-block;
	margin-right:20px;
	vertical-align:middle;
	text-align:center;
	height:70px;
	width:70px;
	border:1px solid #efefef;
}
</style>
<form name="iconForm" class="dialog_form edit_icon_form" novalidate>
<table>
<tr>
<td colspan="2" class="icon_edit_area">
	<button loading="saving" (click)="next(false);" [disabled]="0==iconIndex" class="next_btn pre" title="previous" type="button"></button>
	<div class="edit_canvas" [icon]="tempIcon"></div>
	<button loading="saving" (click)="next(true);" [disabled]="icons.length==(iconIndex+1)" class="next_btn next" title="next" type="button"></button>
</td>
</tr>
<tr>
<td>
	<label class="form_group">
		<div class="form_group_title">
			<span>选择器(selector)</span>
			<div class="help">
				<div class="help_content">帮助内容</div>
			</div>
		</div>
		<input type="text" [(ngModel)]="tempIcon.selector" name="selector" required/>
	</label>
</td>
<td>
	<label class="form_group">
		<div class="form_group_title">名称(name)</div>
		<input type="text" [(ngModel)]="tempIcon.name" name="name" required/>
	</label>
</td>
</tr>
<tr>
<td colspan="2">
	<label class="form_group">
		<div class="form_group_title">标签(use for search)</div>
		<input type="text" [(ngModel)]="tempIcon.tags" name="tags"/>
	</label>
</td>
</tr>
<tr>
<td colspan="2"><button type="button" loading="saving" class="form_btn" (click)="save();" [disabled]="iconForm">保存</button></td>
</tr>
</table>
</form>